<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
<script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://validform.rjboy.cn/Validform/v5.3/Validform_v5.3_min.js"></script>
<script type="text/javascript" src="/Public/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/Public/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/theme/default/css/validform.css">
<include file="./template/default/Public/bsie.html" />

<link rel="stylesheet" href="Public/css/login-page.css">

<style type="text/css">
.red{color:red}
.green{color:green}
</style>
<script type="text/javascript">
function chkMobile(obj){
	if($.trim(obj.value)!==""){
//验证手机号码格式
	var reg=/^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/;
if (!reg.exec($.trim($('#mobile').val()))) {
	alert("请输入正确的手机号码!");
	$('#smscode_btn').attr('disabled','disabled');
 return false; 
}		
		$('#chktip').show();
		$('#chktip').html('<span class="red">检测中...</span>');
		$.ajax({
			url:'/index.php',
			data:'s=/Home/User/chkmobile/mobile/'+$.trim(obj.value),
			dataType:'text',
			type:'GET',
			success:function(data){
				if(data=="exist"){
					$('#submit_btn').attr('disabled','disabled');
					$('#smscode_btn').attr('disabled','disabled');
					$('#chktip').html('<span class="red">该手机号码已经注册!</span>');
				}else if(data=="noexist"){
					$('#chktip').html('<span class="green">该手机号码可以注册!</span>');
					$('#smscode_btn').removeAttr('disabled');
				}
			}
		});	
	}
}
function chkmatch(obj){
	if($.trim(obj.value)!==""){
		$.ajax({
			url:'/index.php',
			data:'s=/Home/User/chkmatch/code/'+$.trim(obj.value),
			dataType:'text',
			type:'GET',
			success:function(data){
				if(data=="match"){
						$('#submit_btn').removeAttr('disabled');
						$('#submit_btn').addClass('btn-success');
						$('#code_flag').html('<i class="icon-ok"></i>');
				}else if(data=="nomatch"){
					$('#submit_btn').attr('disabled','disabled');
					$('#submit_btn').removeClass('btn-success');
					$('#code_flag').html('<i class="icon-remove"></i>');
				}
			}
		});	
	}

}
function chkMail(obj){
	if($.trim(obj.value)!==""){
		//进行ajax用户名搜索
		$.ajax({
			url:'/index.php',
			data:'s=/Home/User/chkUser/email/'+obj.value,
			dataType:'json',
			type:'GET',
			success:function(data){
				
			}
		});	
	}
}
</script>
<style type="text/css">
.navbar-fixed-top .brand {
padding-right: 0;
padding-left: 0;
margin-left: 20px;
float: left;
font-weight: bold;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
.navbar-inner{
	background-color:#2672EC
}
h2{word-wrap: break-word;
display: block;
font-size: 25px;
font-weight: bold;
color: #494949;
margin: 0;
padding: 0 0 15px 0;
line-height: 1.1;
}
</style>
</head>

<body>
<include file="./template/default/Public/header-form.html" />
<style type="text/css">
.state {
color: #f4f4f4;
}
.state ol {
_margin-top: 5px;
list-style:none;
}
.clear {
clear: both;
height: 0px;
overflow: hidden;
}
.spline {
background: url(Public/img/reg.png) repeat-x 0 -50px;
height: 1px;
line-height: 1px;
overflow: hidden;
margin: 10px 0;
}
.state .spline {
margin-bottom: 20px;
}
.state li {
float: left;

width: 220px;
line-height: 30px;
color: #909090;
font-size: 14px;
font-family: 'microsoft yahei','微软雅黑','黑体';
}
.state .current {
color: #3399e0;
}
.state em {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
background-color: #bbb;
text-align: center;
color: #ffffff;
line-height: 20px;
font-size: 18px;
font-family: Arial;
}

.state .current em {
background-color: #06a7e1;
}


.regForm .left {
float: left;
width: 610px;
}

.regForm .right {
width: 320px;
float:right;
}
.aside {
min-height: 420px;
_height: 420px;
padding-left: 20px;
background: url(Public/img/line.jpg) no-repeat left top;
}
.aside h3 {
margin-bottom: 25px;
color: #909090;
font-weight: normal;
font-family: 'microsoft yahei','微软雅黑','黑体';
}


.logintype li {
position: relative;
float: left;
width: 265px;
height: 40px;
margin: 10px 0 25px 0;
border: 1px solid #e5e5e5;
background: #ffffff;
text-align: center;
}
.logintype .current {
border: 1px solid #64c8eb;
background: #64c8eb;
}

.logintype li a {
display: block;
overflow: hidden;
width: 100%;
height: 20px;
padding: 10px 0;
font-size: 20px;
color: #555;
font-family: 'microsoft yahei','微软雅黑','黑体';
text-decoration: none;
}
.logintype .current a {
color: #fff;
}

.logintype .ico__mobile {
display: inline-block;
background: url(Public/img/reg.png) no-repeat -50px -610px;
width: 14px;
height: 24px;
margin-right: 15px;
vertical-align: top;
}
.logintype .current .ico__mobile {
background-position: -50px -765px;
}

.logintype .arrow {
display: none;
position: absolute;
bottom: -10px;
_bottom: -20px;
left: 50%;
width: 20px;
height: 10px;
margin-left: -8px;
background: url(Public/img/reg.png) no-repeat -100px -610px;
}
.logintype .current .arrow {
display: block;
}
.logintype .ico__mail {
display: inline-block;
width: 24px;
height: 21px;
margin-right: 15px;
background: url(Public/img/reg.png) no-repeat 0 -765px;
vertical-align: middle;
}
.formbox {
margin-bottom: 80px;
}

</style>
<script type="text/javascript">
function switchTab(id){
	if (id==1){
		//手机
		$('#tab1').addClass('current');
		$('#tab2').removeClass('current');
		$('#mobile-block').show();
		$('#email-block').hide();
		
	}else if(id==2){
		//邮箱
		$('#tab2').addClass('current');
		$('#tab1').removeClass('current');
		$('#email-block').show();
		$('#mobile-block').hide();
		
	}
}
function RefleshVerify(){ 
//重载验证码
var timenow = new Date().getTime();
$(".vcode").attr("src",'index.php?s=/Home/User/verify/id='+timenow);
}
</script>



<div class="container">
<div class="state">
		<ol>
			<li class="current"><em>1</em>帐号信息</li>
			<li><em>2</em>完善个人资料</li>
			<li><em>3</em>添加宝宝 或 跳过该步骤</li>
            <li><em>4</em>前往成长之旅</li>
		</ol>
		<div class="clear"></div>
		<div class="spline"></div>
</div>

<div class="regForm">
	<div class="left">
    	<div class="section">
        	<div class="logintype">
				<ul>
					<li class="current" onclick="switchTab(1);" id="tab1"><a href="javascript:;"><span class="ico__mobile"></span>手机注册<span class="arrow"></span></a></li>
					<li onclick="switchTab(2);" id="tab2" class=""><a href="javascript:;"><span class="ico__mail"></span>邮箱注册<span class="arrow"></span></a></li>
				</ul>
				<div class="clear"></div>
			</div>
            <!--end logintype-->
            
            <div class="formbox">
            	
                <div id="mobile-block">

  <form action="/index.php?s=/Home/User/doReg" method="POST" autocomplete="off" class="form-horizontal" id="mobile-form">
  <input type="hidden" name="regType" value="mobile">
    <div class="all-errors">
        
    </div>
    
      <div class="control-group">
      <label class="control-label" for="inputEmail"><span class="red">*</span>手机号码</label>
      <div class="controls">
        <input type="text" placeholder="手机号码" name="email"  id="mobile" maxlength="75" datatype="m" nullmsg="手机号码不能为空!" errormsg="请输入正确的手机号码!" onBlur="chkMobile(this)">
        
        <span class="Validform_checktip" id="chktip" style="display:none"></span>
        
        </div>
        
      </div>
      
      
      
      
      <div class="control-group">
      <label class="control-label">
      <span class="red">*</span>密码
      </label>
      
      <div class="controls">
        <input type="password" placeholder="密码" nullmsg="密码不能为空!" errormsg="密码至少6个字符,最多18个字符！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="pwd" value="">
    </div>
    </div>
    
    <div class="control-group">
    <label class="control-label">
    <span class="red">*</span>确认密码
    </label>
    <div class="controls">
    	<input type="password"  placeholder="确认密码" name="repassword" class="inputxt" recheck="pwd"  datatype="*6-18" nullmsg="请确认密码！" errormsg="两次输入的密码不一致！" />
    </div>
    </div>

    <div class="control-group">
    	<label class="control-label">
        	<span class="red">*</span>图片验证码
        </label>
    	<div class="controls">
        	<input id="mobile-chkcode" class="fm-text" type="text" name="checkcode" tabindex="3" autocomplete="off" placeholder="验证码" autocorrect="off" autocapitalize="off" style="width:75px;" size="4" datatype="s4-4" errormsg="请输入四位数的验证码"><a onClick="RefleshVerify()" href="javascript:void(0)"><img src="index.php?s=/Home/User/verify" width="69" style="vertical-align:middle" class="vcode">换一换</a>
        </div>
    </div>
	
    <div class="control-group">
      	<label class="control-label"><span class="red">*</span>短信验证码</label>
        <div class="controls"><button type="button" class="btn btn-primary btn-mini" id="smscode_btn" disabled="disabled">免费获取短信激活码</button>
        &nbsp;

<div class="input-append">
<input type="text" name="sms_code" size="6" class="input-mini" datatype="n6-6" nullmsg="请输入短信激活码" errormsg="激活码为6位数字" onBlur="chkmatch(this)">
  <span class="add-on" id="code_flag"><i class="icon-certificate"></i></span>
</div>

      </div>
      </div>
    
    <div class="control-group">
    <label class="control-label">
    &nbsp;
    </label>
    <div class="controls">
        
            <input type="hidden" name="next" value="/welcome/">
        
        <input type="submit" value="提交注册" id="submit_btn" class="btn span3" data-loading-text="提交中..." disabled="disabled"><span id="mobile-msg" style="margin-left:30px;"></span>

    </div>
    </div>
</form>
                
                </div>
                
                <div id="email-block" style="display:none">
<form action="/index.php?s=/Home/User/doReg" method="POST" autocomplete="off" class="form-horizontal" id="email-form">
<input type="hidden" name="regType" value="email">
    <div class="all-errors">
        
    </div>
      <div class="control-group">
      <label class="control-label" for="inputEmail"><span class="red">*</span>Email</label>
      <div class="controls">
        <input id="id_email" type="text" placeholder="电子邮件" name="email" maxlength="75" datatype="e" nullmsg="电子邮件不能为空!" errormsg="请输入正确的电子邮件!" onBlur="chkMail(this)">
        
        <span class="Validform_checktip"></span>
        
        </div>
        
      </div>
      
      <div class="control-group">
      <label class="control-label">
      <span class="red">*</span>密码
      </label>
      
      <div class="controls">
        <input type="password" placeholder="密码" nullmsg="密码不能为空!" errormsg="密码至少6个字符,最多18个字符！" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="pwd" value="">
    </div>
    </div>
    
    <div class="control-group">
    <label class="control-label">
    <span class="red">*</span>确认密码
    </label>
    <div class="controls">
    	<input type="password"  placeholder="确认密码" name="repassword" class="inputxt" recheck="pwd"  datatype="*6-18" nullmsg="请确认密码！" errormsg="两次输入的密码不一致！" />
    </div>
    </div>

	
    <div class="control-group">
    	<label class="control-label">
        	<span class="red">*</span>验证码
        </label>
    	<div class="controls">
        	<input id="email-chkcode" class="fm-text" type="text" name="checkcode" tabindex="3" autocomplete="off" placeholder="验证码" autocorrect="off" autocapitalize="off" style="width:75px;" size="4" datatype="s4-4" errormsg="请输入四位数的验证码"><a onClick="RefleshVerify()" href="javascript:void(0)"><img src="index.php?s=/Home/User/verify" width="69" style="vertical-align:middle" class="vcode">换一换</a>
        </div>
    </div>
    
    <div class="control-group">
    <label class="control-label">
    &nbsp;
    </label>
    <div class="controls">
        
            <input type="hidden" name="next" value="/welcome/">
        
        <input type="submit" value="提交注册" id="submit_btn" class="btn btn-green" data-loading-text="提交中..."><span id="email-msg" style="margin-left:30px;"></span>

    </div>
    </div>
</form>
                </div>
            
            </div><!--end formbox-->
        
        </div><!--end section-->
    </div>
    
    <div class="right">
    	<div class="aside">
			<h3>已是FacesBaby用户? <a charset="hz-4003981-1000494" href="index.php?s=/Home/User/login">直接登录</a></h3>
			
			<div class="oauth_login">
				<h3>使用合作网站帐号登录</h3><a href="index.php?s=/Home/Sina/callback"><img charset="hz-4003983-1000494" src="Public/images/ico_sina_16x16.png" title="通过新浪微博帐号登录"></a>
			</div>
		</div>
    </div>

</div>



</div>

<script type="text/javascript">
var timeout;
var count = 10; // 60秒倒数

smsCount = function(){
	//启动
	if(count==0){
		$('#smscode_btn').html('免费获取短信激活码');
		count = 10;
		clearTimeout(timeout);	
	}else{
		count--;
		$('#smscode_btn').html(''+count+'秒后重新获取短信激活码');
	}
};




$(function(){
	//$(".signup_form").Validform();  //就这一行代码！;
	
	$("#mobile-form").Validform({
		tiptype:function(msg,o,cssctl){
			var objtip=$("#mobile-msg");
			cssctl(objtip,o.type);
			objtip.text(msg);
		}

	});
	
	$("#email-form").Validform({
		tiptype:function(msg,o,cssctl){
			var objtip=$("#email-msg");
			cssctl(objtip,o.type);
			objtip.text(msg);
		}

	});
	
	
	
	$('#submit_btn').attr('disabled','disabled');
	
	$("#smscode_btn").click(function(){
	//验证手机号码格式
	var reg=/^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/;
if (!reg.exec($.trim($('#mobile').val()))) {
	alert("请输入正确的手机号码!");
 return false; 
}

var chkcode = $.trim($('#mobile-chkcode').val());
	if(count==10){
		
	if(chkcode==""){
		alert('验证码不能为空!');
		$("#mobile-chkcode").focus();
		return false;
	}
	
	$.ajax({
			url:'/index.php',
			data:'s=/Home/User/sendCode/mobile/'+$.trim($('#mobile').val()+'/checkcode/'+chkcode),
			dataType:'json',
			type:'GET',
			success:function(json){
				//判断 返回的状态码
				
				//alert(data);
				//开始倒数
				if(json.code=="fail"){
					alert(json.info);
					timeout = setInterval(smsCount, 1000);
				}else{
					alert(json.info);
					$('#smscode_btn').attr('disabled','disabled');
				}
				
			}
		});	
	}else{
		alert('请等待!');	
	}
	});
	//$('#submit_btn').button();
})
</script>

<include file="./template/default/Public/footer-logined.html" />
</body>
</html>